
<template>
    <div class="individual">
        <navbar title="个人信息" style="background-color: gold;"></navbar>
        <page>
            <ul class="indi">
                <li class="indi_li">
                    <div class="indi_li_zi">头像</div>
                    <div class="indi_li_you">
                        <div class="indi_li_you_ssd">
                            <img class="indi_li_you_img" :src="induser.user_portrait" @click="indimg()">
                            <van-uploader preview-size="38px" class="indi_li_you_ssd_butt" :after-read="afterRead" />
                        </div>
                        <img src="../../static/images/common/next.png">
                    </div>
                </li>
                <li class="indi_li" @click="nameshow = true">
                    <div class="indi_li_zi">昵称</div>
                    <div class="indi_li_you">
                        <div class="indi_li_you_zi">{{ induser.user_name }}</div>
                        <img src="../../static/images/common/next.png">
                    </div>
                </li>
                <li class="indi_li">
                    <div class="indi_li_zi">手机</div>
                    <div class="indi_li_you">
                        <div class="indi_li_you_zi">15675526951</div>
                        <img src="../../static/images/common/next.png">
                    </div>
                </li>
                <li class="indi_li" @click="addressshow = true">
                    <div class="indi_li_zi">城市</div>
                    <div class="indi_li_you">
                        <div class="indi_li_you_zi">{{ induser.user_city == "" ? "请选择城市" : induser.user_city }}</div>
                        <img src="../../static/images/common/next.png">
                    </div>
                </li>
                <li class="indi_li" @click="schoolshow = true">
                    <div class="indi_li_zi">学校</div>
                    <div class="indi_li_you">
                        <div class="indi_li_you_zi">{{ induser.user_school == "" ? "请填写" : induser.user_school }} </div>
                        <img src="../../static/images/common/next.png">
                    </div>
                </li>
            </ul>
            <div class="indi_buttom" @click="submit()">
                提交
            </div>
            <van-popup class="school" v-model="schoolshow" position="bottom" closeable :style="{ height: '25%' }">
                <div class="school_titie">学校</div>
                <van-cell-group>
                    <van-field :clearable="true" :boder="false" class="school_text" v-model="induser.user_school"
                        placeholder="请输入学校的名称" maxlength="20" />
                </van-cell-group>
                <div class="school_buttom" @click="indclose()">完成</div>
            </van-popup>

            <van-popup class="school" v-model="nameshow" position="bottom" closeable :style="{ height: '25%' }">
                <div class="school_titie">昵称</div>
                <van-cell-group>
                    <van-field :clearable="true" :boder="false" class="school_text" v-model="induser.user_name"
                        placeholder="请输入学校的名称" maxlength="20" />
                </van-cell-group>
                <div class="school_buttom" @click="indclose()">完成</div>
            </van-popup>
            <!-- 日历 -->
            <van-popup class="school" v-model="addressshow" position="bottom" :style="{ height: '45%' }">
                <!-- :columns-placeholder="dddfd" -->
                <van-area :columns-num="3"   title="标题" :area-list="areaList" @cancel="addressshow=false" @confirm="confirm" />
            </van-popup>
        </page>
    </div>
</template>

<script>
import { areaList } from '@vant/area-data';
import config from '@/config';
export default {
    data() {
        return {
            areaList,
            schoolshow: false,//学校显示
            nameshow: false,//昵称显示
            addressshow: false,
            induser: [],//用户初始数据
            induserall: [],//最终数据
            dddfd:['请选择','请选择','请选择'],
        }
    },
    created() {
        this.induser = this.$utils.getItem("token") //获取用户信息
        this.induserall = this.induser;
        //设置地址默认值
        //this.dddfd =  this.induser.user_city.split(",")

        console.log(this.dddfd)
      
    },
    methods: {
        indclose() {

            if (this.schoolshow == true) {
                this.induserall.user_school = this.induser.user_school
                this.schoolshow = false
            } else if (this.nameshow == true) {
                this.induserall.user_name = this.induser.user_name

                this.nameshow = false
            }

        },
        confirm(e) {
            this.induserall.user_city=[]
            e.forEach(v => {
                
                this.induserall.user_city += `${v.name},`

            })
            this.induserall.user_city = this.induserall.user_city.substr(0, this.induserall.user_city.length - 1) //获取地址
            console.log(this.induserall.user_city)
            this.addressshow = false;
        },
        async afterRead(fileImg) {
            let aliyunOssToken = await this.$http.home.token();

            let form = new FormData()

            form.append("OSSAccessKeyId", aliyunOssToken.OSSAccessKeyId)
            form.append("policy", aliyunOssToken.policy)
            form.append("Signature", aliyunOssToken.signature)
            form.append("key", fileImg.file.name)
            form.append("file", fileImg.file)
            await this.$http.home.uploadFile(form, {
                "Content-Type": "multipart/form-data",
            });
            this.induser.user_portrait = `${config.aliOss.host}/${fileImg.file.name}`
            this.induserall.user_portrait = `${config.aliOss.host}/${fileImg.file.name}`
        },
        async submit(){
            let ret = await this.$http.me.meinfo(this.induserall);
            this.$utils.setItem("token",this.induserall)
            this.$toast.success('修改成功');
        }
    }
}
</script>

<style scoped lang="less">
@import "~@less/individual";
</style>